<template>
  <div class="me flex flex-col gr-4 relative">
    <div class="flex head px-16" @click="setting">
      <div class="avatar mr-12">
        <img :src="getAvatar()" width="64" height="64" />
      </div>
      <div class="flex-1 flex flex-col gr-8">
        <div class="text-18 text-shadow username">
          {{ userStore.master.username }}
        </div>
        <div class="text-666">微信号： {{ userStore.master.wxId }}</div>
        <div class="flex gc-4">
          <div class="status flex align-center">
            <img :src="plus" width="14" />
            <span>状态</span>
          </div>
          <img width="22" :src="refreshPng" />
        </div>
      </div>
      <div class="flex gc-8 align-center">
        <img :src="qrcode" width="16" height="16" />
        <img :src="arrowRight" width="16" height="16" />
      </div>
    </div>

    <div class="list-item">
      <List
        title="服务"
        :icon="servicePng"
        :font-size="14"
        @click="gotoService"
      ></List>
    </div>

    <div class="list-item">
      <List
        v-for="(item, key) in myList"
        :key="key"
        :title="item.title"
        :icon="item.icon"
        :font-size="14"
        @click="item.action"
      ></List>
    </div>
    <div class="list-item">
      <List
        title="设置"
        :font-size="14"
        :icon="settingPng"
        @click="showSetting = true"
      ></List>
    </div>
    <!-- 组件 -->
    <Transition name="slide-left">
      <component :is="currentComponent"></component>
    </Transition>

    <Setting></Setting>
  </div>
</template>

<script setup lang="ts">
  import qrcode from '@/assets/images/qrcode.png';
  import plus from '@/assets/images/plus-10.png';
  import arrowRight from '@/assets/images/arrow-right.png';
  import refreshPng from '@/assets/images/refresh-circle.png';
  import { computed, markRaw, ref } from 'vue';
  import { getAvatar, getUserStore } from '@/store/user/utils';
  import settingPng from './assets/setting.png';

  import List from '../components/list/List.vue';
  import Setting from './setting/Setting.vue';
  import servicePng from './assets/service.png';
  import Information from './information/Information.vue';
  import { currentComponent, myList } from './me/me';
  import Service from './service/Service.vue';
  import { showSetting } from './setting/setting';

  const userStore = computed(() => {
    return getUserStore();
  });
  const gotoService = () => {
    currentComponent.value = markRaw(Service);
  };
  const setting = () => {
    currentComponent.value = markRaw(Information);
  };
</script>

<style lang="scss" scoped>
  @import './me/style';
</style>
